<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body onclick="window.location.href='011.html'">
		
		<style>
body {
    background: url(../img/9、10页.jpg) no-repeat;
    background-size: 100%;
    
}

.dialog {
    width:100%;
    height:100px;
    background:rgba(136,180,251,0.5);
    position:absolute;
    bottom: 20px;
}
.dialog .pic {
    width:60px;
    height:60px;
    background:url(../img/10头像.png) no-repeat;
    background-size: 100%;
    display:inline-block;
    position: absolute;
    top:16px;
    left:16px;
    border-radius: 5px;
}
.dialog .innerBox{
    width:90%;
    height:80px;
    border:2px solid #dcc0a5;
    opacity: 0.8;
    left:85px;
    top:10px;
    position: absolute;
    border-radius: 5px;
    font-size: 20px;
    font-family: 微软雅黑;
    color:#fff;
    text-shadow: 1px -1px 1px #333;
    word-wrap:break-word;
    padding:2px;
}

p{color: white;
font-family:"courier new";
font-size:20px;
position:fixed;
bottom: 0;
right: 10%;
 text-shadow: 1px -1px 1px #333;
animation: blink 2.5s infinite;
}

@keyframes blink{
	0%{opacity: 0;}
	25%{opacity: 1;}
	50%{opacity: 0;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}
		</style>
			<div class='dialog'>
    <span class='pic'></span>
    <div class='innerBox'></div>
    <p>Next</p>
</div>



<script>
	window.onload = function(){
    var innerBox = document.getElementsByClassName('innerBox')[0];
    
    
    var text = '"..."';
    var len = text.length;
    var timer = null;
    var index = 0;
    timer = setInterval(function(){
        if(index == len){
            clearInterval(timer);
        }
        innerBox.innerHTML += text.charAt(index++);
    },20);
}
	</script>
	</body>
</html>
